<!doctype html>
<script src="../../resources/testharness.js"></script>
<script src="../../resources/testharnessreport.js"></script>
<style>
  .specwidth { width: 400px }
  .stf { float: left; }
  .test { display: block; background-color: red }
  .sizer { width: 200px }
  .control { /* overlay to hide the red */
      position: absolute;
      width: 200px;
      height: 200px;
      background-color: green;
  }
</style>
<body>
  <div class="specwidth">
    <div class="stf">
      <svg class="test" viewBox="0 0 1 1">
      </svg>
      <div class="sizer">
      </div>
    </div>
  </div>
  <div class="control">
  </div>
  <script>
    test(function() {
        var bounds = document.querySelector('.test').getBoundingClientRect();
        assert_equals(bounds.width, 200);
        assert_equals(bounds.height, 200);
    }, "Use available width and use intrinsic ratio to compute height");
  </script>
</body>
